<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="font_2973804_ddtcz4vvlhg/iconfont.css">
    <style>
        html,body{
            width: 100%;
            height: 100%;
        }
        .big-box{
            width: 1910px;
            height: 950px;
            display: flex;
          
        }
        .big-box .tu{
            width: 470px;
           
        }
        .big-box .tu img{
            width: 100%;
            height: 950px;
          
        }
        .big-box .zong{
            width: 1440px;
            height: 100%;
            display: flex;
            flex-direction: column;
            background-color: #fafafa;
        }
        .zong .header{
            height: 160px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .zong .header section{
            width: 200px;
            height: 52px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding-left: 20px;
        }
        .zong .header section h1{
            height: 52px;
            width: 52px;
        }
        .zong .header section h1 img{
            height: 52px;
            width: 52px;
        }
        .zong .header section p{
            font-size: 30px;
            font-weight: 600;
        }
        .zong .header ul{
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .zong .header ul a{
            color: #9a9a9a;
            padding-right: 45px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            
        }
        .zong .header ul a:nth-child(4){
            border-left: 1px solid #9a9a9a;
            padding-left: 20px;
        }
        .zong .header ul a li{
            display: flex;
            justify-content: space-around;
            align-items: center;
            text-align: center;
        }
        .zong .header ul a h6{
            border-top: 7px solid #9a9a9a;
            border-left:7px solid transparent;
            border-right:7px solid transparent;
        }
        .zong .header ul a:hover{
            color: orange;
        }
        .zong .header ul a h5{
            border-bottom:7px solid orange ;
            border-left:7px solid transparent;
            border-right:7px solid transparent;
            display: none;
        }
       .zong .ye{
           width: 565px;
           height: 700px;
           margin: auto;
           display: flex;
           flex-direction: column;
           justify-content: space-around;
           align-items: center;
           background-color: #ffffff;
       }
       .zong .ye .head{
           width: 445px;
           height: 50px;
         
           display: flex;
       }
       .zong .ye .head a{
           width: 100px;
           height: 50px;
           /* color: #eaeaea; */
           
       }
       .zong .ye .head a h2{
            width: 70px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-size: 26px;
            
       }
       .zong .ye .head a h2:hover{
           font-weight: 700;
           border-bottom: 2px solid orange;
       }
       .zong .ye .zhanghao{
           width: 445px;
           height: 72px;
           
           
           display: flex;
           flex-direction: column;
           justify-content: space-around;
           align-items: flex-start;
       }
       
       .zong .ye .zhanghao input{
           width: 425px;
           background-color: #f9f9f9;
           padding-left: 20px;
       }
       .zong .ye .zhanghao input:nth-child(1){
           
           height: 60px;
           font-size: 20px; 
       }
       .zong .ye .zhanghao input:nth-child(2){
           height: 12px;
       }
       .zong .ye .mima{
           width: 445px;
           height: 72px;
           /* background-color: #f9f9f9; */
           position: relative;
           
           display: flex;
           flex-direction: column;
           justify-content: space-around;
           align-items: flex-start;
       } .zong .ye .mima input{
           width: 425px;
           background-color: #f9f9f9;
           padding-left: 20px;
       }
       .zong .ye .mima input:nth-child(1){
           
           height: 60px;
           font-size: 20px;
           
       }
       .zong .ye .mima input:nth-child(2){
           
           height: 12px;
       }
       .zong .ye .mima span{
           position: absolute;
           right: 20px;
           top: 25px;
       }
       .zong .ye .mima .iconfont{
           font-size: 30px;
           color: #bbbbbb;
       }
       .zong .ye .xieyi{
           width: 445px;
           height: 30px;
           display: flex;
           justify-content: flex-start;
           align-items: flex-start;
           line-height: 30px;
       }
       .zong .ye .xieyi input{
           margin-top: 10px;
       }
       .zong .ye .xieyi strong{
           font-weight: 600;
       }
       .zong .ye button{
           width: 445px;
           height: 72px;
           background-color: #ffbe99;
           color: white;
           text-align: center;
           line-height: 72px;
           border: none;
           font-size: 20px;
       }
        .zong .ye .foot{
            width: 445px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            
        }
        .zong .ye .foot a{
            color: orange;
        }
        .zong .ye h4{
            color: #aaaaaa;
        }
        .zong .ye .end{
            width: 445px;
            height: 62px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .zong .ye .end .iconfont{
            font-size: 60px;
            padding-left: 20px;
        }
        .zong .ye .end .shenglan{
            color: #1989fa;
        }
        .zong .ye .end .lv{
            color: #50b674;
        }
        .zong .ye .end .qianlan{
            color: #18acfc;
        }
        .zong .ye .end .hong{
            color: #ea5d5c;
        }
    </style>
</head>
<body>
    <div class="big-box">
        <div class="tu">
            <img src="img/banner.4994397e.jpg" alt="">
        </div>
        <div class="zong">
            <div class="header">
                    <section>
                        <h1><img src="img/logo-mi2.png" alt=""></h1>
                        <p>小米账号</p>
                    </section>
                   <ul>
                       <a href=""><li>用户协议</li></a>
                       <a href=""><li>隐私政策</li></a>
                       <a href=""><li>帮助中心</li></a>
                       <a href=""><li>
                           <span>中文(简体)</span>
                           <h6></h6>
                           <h5></h5>
                       </li></a>
                   </ul>
            </div>

            <div class="ye">
               
                    <div class="head">
                       <a href=""><h2>登录</h2></a> 
                      <a href="zhuce.html"><h2>注册</h2></a>  
                    </div>

                    <div class="zhanghao">
                        <input type="text" placeholder="手机号码">
                        <input type="text" id="number">
                    </div>
                    <span id="one"></span>
                    <div class="mima">
                        <input type="text" placeholder="密码">
                        <input type="text" id="pwd">
                        <span class="iconfont icon-bukeshimima"></span>
                    </div>
                    <span id="two"></span>
                    <div class="xieyi">
                    <input type="checkbox" id="check">已阅读并同意小米账号<strong>用户协议</strong>和<strong>隐私政策</strong>
                    
                    </div>
                   <button id="btnlogin">登录</button>
                    <div class="foot">
                        <a href=""><span>忘记密码?</span></a>
                        <a href=""><span>手机号登录</span></a>
                    </div>
                    <h4>其他方式登录</h4>
                    <div class="end">
                        <span class="iconfont icon-zhifubao shenglan"></span>
                        <span class="iconfont icon-weixin lv"></span>
                        <span class="iconfont icon-QQ qianlan"></span>
                        <span class="iconfont icon-weibo hong"></span>
                    </div>
                
            </div>
        </div>
    </div>
</body>
</html>
<script src="js/jQuery.js"></script>
<script src="js/ajaxFun.js"></script>
<script>
    $(".zong .header ul a:last ").mousemove(function(){
        $(".zong .header ul a h6").css({
            display:"none"
     
        });
    });
    $(".zong .header ul a:last ").mouseout(function(){
        $(".zong .header ul a h6").css({
            display:"block"
     
        });
    });

    $(".zong .header ul a:last ").mousemove(function(){
        $(".zong .header ul a h5").css({
            display:"block"
        
        });
    });
    $(".zong .header ul a:last ").mouseout(function(){
        $(".zong .header ul a h5").css({
            display:"none"
         
        });
    });

    $(".zong .ye .zhanghao").click(function(){
        $(".zong .ye .zhanghao input:first").css({
            height:"12px",
            fontSize:"10px"
        });
    });
    $(".zong .ye .zhanghao").click(function(){
        $(".zong .ye .zhanghao input:last").css({
            height:"72px",
            fontSize:20
        });
    });
    $(".zong .ye .mima").click(function(){
        $(".zong .ye .mima input:first").css({
            height:"12px",
            fontSize:"10px"
        });
    });
    $(".zong .ye .mima").click(function(){
        $(".zong .ye .mima input:last").css({
            height:"72px",
            fontSize:20
        });
    });

    var flagPho = false;//手机
    var flagPwd = false;//密码

    $("#number").blur(function () {
    let regPho = /^1[3578]\d{9}$/;
    if (regPho.test($(this).val())) {
        $("#one").html("输入正确！");
        flagPho = true;
    } else {
        $("#one").show();
        $("#one").html("请输入正确的手机号！");
        $(this).click(function () {
            $("#one").hide();
        })
        flagPho = false;
    }
});

$("#pwd").blur(function () {
    
    var regNum = /^\d{6,18}$/;
    var regChar = /^[a-zA-Z]{6,18}$/;
    var regOther = /^[!@#]{6,18}$/;
    
    var _regNum = /\d+/;
    var _regChar = /[a-zA-Z]+/;
    var _regOther = /[!@#]+/;
    if (regNum.test($(this).val()) || regChar.test($(this).val()) || regOther.test($(this).val())) {
        $("#two").html("密码输入正确！");
        flagPwd = true;
    } else if (_regNum.test($(this).val()) && _regChar.test($(this).val()) && _regOther.test($(this).val())) {
        $("#two").html("密码输入正确！");
        flagPwd = true;
    } else if ((_regNum.test($(this).val()) && _regChar.test($(this).val())) || (_regChar.test($(this).val()) &&
        _regOther.test($(this).val())) || (_regNum.test($(this).val()) && _regOther.test($(this).val()))) {
        $("#two").html("密码输入正确！");
        flagPwd = true;
    } else {
        $("#two").html("密码格式输入错误！");
       
            $("#two").hide();
        
        flagPwd = false;
    }
});


$("#btnlogin").click(function () {
   
    loginUser() 
  
 });

 function loginUser() {
    $.ajax({
        url: "./goodsAndShoppingCart/login.php",
        type: "post",
        data: {
            username: $("#number").val(),
            userpass: $("#pwd").val()
        },
        success: function (data) {
            console.log(data);
            if (data.trim() == "success") {
                
                
                alert("登录成功！点击确定后跳转商城")
                location.href = "index.html";

            } else {
                alert("登录失败，用户名或者密码错误！")
            }
        }
    });
}
</script>

